<template>
	<view class="work-container">
		<view class="tabs">
			<!-- 提现数据 -->
			<up-tabs lineWidth="100px" itemStyle="height:50px;" :scrollable="false" :list="tabList" @click="clickTab"
				activeStyle="color:rgb(0,122,255);fontSize:18px" inactiveStyle="color:#888;fontSize:16px"></up-tabs>
			<up-list @scrolltolower="scrolltolower" style="background-color: #eeebec;">
				<up-empty :iconSize="150" mode="list" text="当前暂无数据" v-if="list.length === 0"></up-empty>
				<up-list-item v-for="item in list" :key="item.id">
					<block>
						<view class="cu-bar bg-white solid-bottom">
							<view class="action">
								<text class="cuIcon-title text-orange"></text>
								<view>{{ item.anxinqianContractNo }}
									<view style="font-size: 22rpx;">{{ item.depana }}</view>
								</view>
							</view>
							<view class="action" @click="download(item)">
								<text class="text-green">查看</text>
							</view>
						</view>
					</block>
				</up-list-item>
				<LoadMore :status="status" v-if="list.length !== 0"></LoadMore>
			</up-list>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import LoadMore from "@/components/LoadMore.vue"
import { getAgreement as getAgreementDriver } from '@/api/driver'
import { getImage } from '@/api/file'
import { getAgreement as getAgreementCaptain } from '@/api/captain'
import {
	useUserStore
} from '@/store/modules/user'
import {
	storeToRefs
} from "pinia"


/* hooks */
const {
	role
} = storeToRefs(useUserStore())


/* 数据 */
const uToastRef = ref<any>(null)
// tab选项
const tabList = reactive([
	{
		name: '运输协议',
		contractType: role.value === 'driver' ? 1 : 3,
	},
	{
		name: '委托收款协议',
		contractType: 2,
	}
])
// 获取列表参数
const getListParams = reactive({
	currPage: 1,
	limit: 20,
	contractType: role.value === 'driver' ? 1 : 3
})
// 列表数据
const list = reactive<any[]>([])
// 是否还有下一页
const hasNextPage = ref(false)
const status = ref<"loadmore" | "nomore" | "loading" | undefined>('loadmore')


/* 方法 */
// 下载
const download = async (item: any) => {
	try {
		uToastRef.value.show({
			message: "正在获取协议",
			type: 'loading',
			duration: -1
		})
		let urlRes = await getImage(item.contractFileId)
		uToastRef.value.hide()
		if (!urlRes.success) return
		uToastRef.value.show({
			message: "正在获取协议",
			type: 'loading',
			duration: -1
		})
		let url = urlRes.data
		// 先下载到临时路径
		let { tempFilePath } = await uni.downloadFile({
			url
		})
		uToastRef.value.show({
			position: 'top',
			message: '打开协议后点击右上角"..."保存',
			type: 'success',
			complete: () => {
				uni.openDocument({
					filePath: tempFilePath,
					fileType: 'pdf', // 支持: pdf, doc, xls, ppt, txt 等
					showMenu: true,  // 关键参数：显示右上角菜单
					success: () => { }
				})
			}
		})
	} catch (e: any) {
		uToastRef.value.show({
			position: 'top',
			message: "查看失败！" + (e.message || e.msg || e.errMsg),
			type: 'error'
		})
	}
}
// 点击tab
const clickTab = async (item: typeof tabList[0]) => {
	getListParams.currPage = 1
	getListParams.contractType = item.contractType
	list.length = 0
	await getList(getListParams)
}
// 滚动到底部
const scrolltolower = async () => {
	if (hasNextPage.value) {
		status.value = "loading"
		let params = {
			...getListParams,
			currPage: getListParams.currPage + 1
		}
		await getList(params)
	} else {
		status.value = "nomore"
	}
}
// 获取列表数据
const getList = async (params: typeof getListParams) => {
	uToastRef.value.show({
		message: "正在获取记录",
		type: 'loading',
		duration: -1
	})
	let fn = null
	if (role.value === 'driver') {
		fn = getAgreementDriver
	} else {
		fn = getAgreementCaptain
	}
	let res = await fn(params)
	uToastRef.value.hide()
	if (res.success) {
		Object.assign(getListParams, params)
		list.push(...res.data.list)
		hasNextPage.value = res.data.hasNextPage
		if (hasNextPage.value) {
			status.value = 'loadmore'
		} else {
			status.value = 'nomore'
		}
	}
}
// 初始化封装
const init = async () => {
	await getList(getListParams)
}




/* 钩子 */
onMounted(async () => {
	await init()
})


</script>

<style lang="scss" scoped>
.Ima {
	text-align: center;
	margin-top: 110rpx;

	image {
		width: 320rpx;
	}

	view {
		margin-top: 21rpx;
		color: #999;
	}
}
</style>
